<template>
    <section>
        <el-row class="toolbar" style="padding-bottom: 0px;"  >
            <el-form  :model="filters" :inline="true" >
                <el-form-item>
                    <el-input v-model="filters.name" placeholder="快递名/快递code"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search(1)">查询</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" v-on:click="search(0)">取消</el-button>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleAdd">新增</el-button>
                </el-form-item>
            </el-form>
        </el-row>

        <el-table highlight-current-row v-loading="listLoading"
                  :data="list"
                  style="width: 100%">
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column type="index" width="60">
            </el-table-column>
            <el-table-column prop="name" label="快递名" >
            </el-table-column>
            <el-table-column prop="expressCode" label="快递编码" width="180" >
            </el-table-column>
            <el-table-column prop="icon" label="快递ICON" width="140" >
                <template  slot-scope="scope" >
                    <img :src="renderImage(scope.row.icon)" height="60" style="margin-top: 3px" />
                </template>
            </el-table-column>
            <el-table-column prop="status" label="状态" width="140"  :formatter="stateFormat" ></el-table-column>
            <el-table-column  prop="action" label="操作" width="280" >
                <template slot-scope="scope" >
                    <el-button type="warning" v-if="scope.row.status==1" size="small" @click="handleState(scope.$index, scope.row)">禁用</el-button>
                    <el-button type="success" v-if="scope.row.status==0" size="small" @click="handleState(scope.$index, scope.row)">启用</el-button>
                    <el-button type="primary" size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="danger" size="small" @click="handleDel(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-col :span="24" class="toolbar">
            <template >
                <div class="block">
                    <el-pagination
                            @size-change="handleSizeChange"
                            @current-change="handleCurrentChange"
                            :current-page="pager.page"
                            :page-sizes="pager.sizes"
                            :page-size="pager.limit"
                            layout="total, sizes, prev, pager, next, jumper"
                            :total="pager.totalPage">
                    </el-pagination>
                </div>
            </template>
        </el-col>

        <el-dialog :title="dialogName" v-model="dialogVisible"  :close-on-click-modal="false" >
            <el-form  :model="model" label-width="90px"  ref="model"  >
                <el-row>
                    <el-col :span="16" >
                        <el-form-item label="快递名称" prop="name" >
                            <el-input v-model="model.name" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16" >
                        <el-form-item label="快递编码" prop="expressCode" >
                            <el-input v-model="model.expressCode" auto-complete="off"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                 <el-form-item label="快递LOGO" prop="icon" >
                        <el-upload
                                action="/admin/banner/upload"
                                :on-success="onUploadSuccess"
                                list-type="picture-card"
                                :limit="thumbUploadSize"
                                :file-list="fileList"
                            >
                            <i class="el-icon-upload" ></i>
                        </el-upload>
                 </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click.native="handleSubmit" :loading="addLoading">提交</el-button>
            </div>
        </el-dialog>
    </section>
</template>

<script>
    import {getExpressList,saveExpressData,deleteExpress} from "../../api/api";

    export default {
        name: "List",
        data(){
            return{
                filters:{
                    name:''
                },
                listLoading:false,
                list:[],
                model:{},
                pager:{
                    page:1,
                    limit:16,
                    totalRow:0,
                    totalPage:1,
                    sizes:[16,24,48]
                },
                dialogName:'',
                dialogVisible:false,
                thumbUploadSize:1,
                fileList:[],
                addLoading:false
            }
        },
        mounted(){
            this.loadData()
        },
        methods:{
            handleSizeChange(val){
                this.pager.limit = val
                this.getOrders();
            },
            handleCurrentChange(val) {
                this.pager.page = val;
                this.getOrders()
            },
            loadData(){
                let that = this
                that.listLoading = true
                getExpressList({
                    page:this.pager.page,
                    limit:this.pager.limit,
                    name:that.filters.name
                }).then(resp=>{
                    that.listLoading = false
                    if(resp.data.code == 200){
                        that.list = resp.data.data.list
                        that.pager.totalRow = resp.data.data.totalRow
                        that.pager.totalPage = resp.data.data.totalPages
                    }else{
                        that.$message({
                            type:'error',
                            message:resp.data.msg
                        })
                    }
                })
            },
            search(type){
                if(type == 0){
                    this.filters.name = ''
                }
                this.loadData()
            },
            handleAdd(){
                this.dialogName = '新增'
                this.model = {
                    name:'',
                    icon:'',
                    status:1,
                    expressCode:''
                }
                this.fileList = []
                this.dialogVisible = true
            },
            handleEdit(index,row){
                this.dialogName = '编辑'
                this.model.id = row.id
                this.model.name = row.name
                this.model.icon = row.icon
                this.model.staus = row.status
                this.model.expressCode = row.expressCode
                this.dialogVisible = true
                this.fileList = [{url:this.renderImage(row.icon)}]
            },
            handleState(index,row){
                let question = '确定要禁用该快递吗？'
                let params  = {
                    id: row.id,
                    status: 0
                }
                if(row.status==0){
                    question = '确定要启用该快递吗？'
                    params.status = 1;
                }
                this.$confirm(question, '提示', {}).then(() => {
                    this.addLoading = true;
                    saveExpressData(params).then((res) => {
                        if(res.code == 200){
                            this.addLoading = false;
                            //NProgress.done();
                            this.$message({
                                message: params.status==0?'已禁用':'已启用',
                                type: 'success'
                            });
                            this.loadData();
                        }
                    });
                })
            },
            handleDel(index,row){
                this.$confirm('确认删除该快递吗?', '提示', {
                    type: 'warning'
                }).then(() => {
                    this.listLoading = true;
                    //NProgress.start();
                    let para = { id: row.id };
                    deleteExpress(para).then(res => {
                        this.listLoading = false;
                        //NProgress.done();
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.loadData();
                    });
                }).catch(() => {

                });
            },
            stateFormat(row){
                return row.status == 1?'正常':'禁用'
            },
            handleSubmit(){
                let that = this
                that.addLoading = true
                saveExpressData(this.model).then(resp=>{
                    that.addLoading = false
                    that.dialogVisible = false
                    if(resp.code == 200){
                        that.loadData()
                    }else{
                        that.$message({
                            type:'error',
                            message:resp.data.msg
                        })
                    }
                })
            },
            onUploadSuccess(res){
                let url = res.data.path;
                this.model.icon = url;
            },
            renderImage(url){
                if(url.substr(0,6)=='http:/' || url.substr(0,7)=='https:/'){
                    return url;
                }else{
                    return this.imageService + url;
                }
            }
        }
    }
</script>

<style scoped>

</style>
